function Swiper(el) {
  this.el = document.querySelector(el)
  this.spans = this.el.querySelectorAll('.swiper-pagination>span')
  this.init()
  this.t
  this.num = 1
}
Swiper.prototype.init = function () {
  //自动切换
  this.autoPlay()
  //分页器移入
  this.spanOver()
  //分页器移出
  this.spanOut()
  //上一张
  this.imgUp()
  //下一张
  this.imgNext()
}

Swiper.prototype.autoPlay = function () {

  this.t = setInterval(() => {
    this.num++
    if (this.num > 6) {
      this.num = 1
    }
    this.el.querySelector('img').src = `./images/${this.num}.jpg`
    //分页器同步
    this.tbPage(this.num)
  }, 1000)
}
Swiper.prototype.tbPage = function (num) {
  this.el.querySelector('.swiper-pagination>span.active').className = ''
  this.el.querySelector(`.swiper-pagination>span:nth-of-type(${num})`).className = 'active'
}

Swiper.prototype.spanOver = function () {
  this.spans.forEach((item, i) => {
    item.onmouseover = () => {
      clearInterval(this.t)
      this.num = i + 1
      this.el.querySelector('img').src = `./images/${this.num}.jpg`
      this.tbPage(this.num)
    }
  })
}
Swiper.prototype.spanOut = function () {
  this.spans.forEach(item => {
    item.onmouseout = () => {
      this.autoPlay()
    }
  })
}
Swiper.prototype.imgUp = function () {
  this.el.querySelector('#s1').onclick = () => {
    this.num--
    if (this.num < 1) this.num = 6
    this.el.querySelector('img').src = `./images/${this.num}.jpg`
    this.spans.forEach(item => {
      item.className = ''
    })
    this.spans[this.num - 1].className = 'active'
  }
}
Swiper.prototype.imgNext = function () {
  this.el.querySelector('#s2').onclick = () => {
    this.num++
    if (this.num > 6) this.num = 1
    this.el.querySelector('img').src = `./images/${this.num}.jpg`
    this.spans.forEach(item => {
      item.className = ''
    })
    this.spans[this.num - 1].className = 'active'
  }
}